<template>
  <input type="text" v-model="todoValue" @keyup="addTodoValue" />
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue";
import { TodoManager, IUseTodo } from "@/hooks/TodoManage";
export default defineComponent({
  name: "App",
  setup() {
    const todoManager: IUseTodo = TodoManager();
    const todoValue = ref<string>("");
    const addTodoValue = (e: KeyboardEvent): void => {
      if (e.keyCode == 13 && todoValue.value.trim().length) {
        todoManager.AddTodo(todoValue.value);
        todoValue.value = "";
      }
    };
    return {
      todoValue,
      addTodoValue,
    };
  },
  components: {},
});
</script>

<style scoped>
</style>